<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/gedan.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
    <style>
        /* 页面最下面那页标选中 */
        .choicedp{
            text-decoration: none;
        }
        /* 页面最下面那页标  未  选中 */
        .unchoicedp{
            text-decoration: none;
            border-bottom: none;
        }
        /* 最上面的分类 选中 */
        .choicedc{
            font-size: 25px;
        }
        /* 最上面的分类 未  选中 */
        .unchoicedc{
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="part">
            <ul>
                <li v-for="(item,i) in cat" class="fenlei">
                    <a href="#none" @click="setcat(item)"
                        v-bind:id=i+1+"cat" onclick="choicedCat1(id)">{{item}}</a>
                </li>
            </ul>
            <ul class="ych">
                <li v-for="(item,id) in temp">
                    <div class="cover" v-bind:id=item.id onclick="transportGeganId(id)">
                        <img v-bind:src=item.coverImgUrl+"?param=150y150" alt="">
                        <a v-bind:title=item.name href="./jutigedan.html" class="msk"></a>
                        <div class="bottom">
                            <a href="javascript:;" class="icon-play" title="播放" data-res-action="play"></a>
                            <span class="icon-headset">

                            </span>
                            <span class="number" v-text="item.playCount>100000?item.playCount:'100000+'">
                            </span> 
                        </div>
                    </div>
                    <p class="dec" v-bind:id=item.id onclick="transportGeganId(id)">
                        <a href="./jutigedan.html" v-bind:title=item.name class="">
                            {{item.name}}
                        </a>
                    </p>
                    <p>
                        <span></span>
                    </p>
                </li><!--歌单接口-->
            </ul>
            <p class="ych2" style="width: 80%;margin: 0 auto;text-align: center;margin-bottom: 20px;">
                <a href="#top"  @click="prePage" onclick="prePage1()" v-show="page>0">上一页</a>
                <span  v-for="(item,i) in pageList">
                    <a href="#top" @click="chociePage(item)" v-bind:id=i+1
                         class="unchoiced" onclick="choicePage1(id)">{{item}}</a>
                    &nbsp;&nbsp;&nbsp;
                </span>
                <a href="#top" @click="nextPage" onclick="nextPage1()"> 下一页</a>
            </p>
        </div>
    </div>
    <script>
        var npid = 1;   //nowPageId 当前选中页的id
        function transportGeganId(id){
            // window.parent.gedanid = id;
            sessionStorage.setItem('gedanid',id);
        }
        function $(id){return document.getElementById(id);}
        function choicedCat1(id){
            for(var i = 1;i<e.cat.length+1;i++){
                $(i+"cat").className="unchoicedc";
            }
            $(id).className="choicedc";
        }
        function prePage1(){
            npid = npid>1?npid-1:npid;
            choicePage1(npid);
        }
        function nextPage1(){
            npid = npid<10?npid+1:npid;
            choicePage1(npid);
        }
        function choicePage1(id){
            npid = id;
            for(var i = 1;i<11;i++){
                $(i).className="unchoicedp";
            }
            $(npid).className="choicedp";
        }
        var e = new Vue({
            el:".part",
            data:{
                msg:"获取状态",
                mlist:new Array(),   //返回的所有信息
                temp:new Object(),
                code:"18",  //一次获取的个数,刚好一页18个
                page:0,   //page*18=offset
                cat:["全部","华语","古风","欧美","流行"],  //风格
                useCat:"全部",  //使用的cat值
                order:["hot","new"], //最新，热门
                pageList:[1,2,3,4,5,6,7,8,9,10] //底部页面选择列表
            },
            methods:{
                get:function(){
                    var t = this;
                    /*
                        接口地址：/top/playlist
                        例子：/top/playlist?limit=10&order=new
                        参数：
                            order: 可选值为 'new' 和 'hot', 分别对应最新和最热 , 默认为 'hot'

                            cat:cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部",可从歌单分类接口获取(/playlist/catlist)

                            limit: 取出歌单数量 , 默认为 50

                            offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*50, 其中 50 为 limit 的值
                    */
                    if( t.mlist[t.page]==null){
                        axios.get(
                            "https://autumnfish.cn/top/playlist?limit="+t.code
                            +"&order="+t.order[0]
                            +"&cat="+t.useCat
                            +"&offset="+parseInt(t.page*t.code)
                            ).then(function(response){
                                t.temp = response.data.playlists;
                                t.msg = "已获取";
                                console.dir(t.temp);
                                t.mlist[t.page] = t.temp;
                        },function (err){
                                t.msg = "获取失败";
                        })
                    }
                },
                changePageList:function(num){
                    var n = parseInt(num);
                    for(var i = 0;i<10;i++){
                        this.pageList[i] += n;
                        console.log(this.pageList[i]);
                    }
                    npid -= num;
                    choicePage1(npid); 
                },
                nextPage:function(){
                    if(this.page+1>=this.pageList[9]-1){
                        this.changePageList(5);
                    }
                    this.chociePage(this.page+2);
                },
                prePage:function(){
                    if(this.page>0){
                        if(this.page-1<this.pageList[0]-1){
                            this.changePageList(-5);
                        }
                        this.chociePage(this.page);
                    }
                },
                chociePage:function(page1){
                    this.page = page1-1;
                    if(this.mlist[this.page]==null){
                        this.get();
                    }else{
                        this.temp = this.mlist[this.page];
                    }
                },
                setcat:function(cat1){
                    this.useCat = cat1;
                    this.mlist = new Array();
                    this.page = 0;
                    choicePage1(1);
                    this.pageList = [1,2,3,4,5,6,7,8,9,10];
                    this.temp = null;
                    this.get();
                }
            }
        });

        //初始化页面，获取第一页歌单
        e.get();
        choicePage1(1);
        choicedCat1("1cat");
    </script>
</body>
</html>